
<template>
    <div class="marketing-three" v-if="info_data">
        <div class="head-title">
            <span>拼团记录</span>
        </div>
        <div class="info-box">
            <div class="info-data">
                <div class="title">{{ info_data.shop_name }}</div>
                <div class="doc">{{ info_data.title }}</div>
                <div class="num-box">
                    <span>拼团人数 {{ info_data.num_pin }}</span
                    ><span>参与产品 {{ parseFloat(info_data.num_gd) }}</span>
                </div>
                <div class="time-box">
                    <span
                        >活动时效 {{ info_data.time_from_txt }} 至
                        {{ info_data.time_to_txt }}</span
                    >
                </div>
            </div>
            <div class="info-status">
                <div class="stauts">{{ info_data.status_txt }}</div>
                <div class="but-box">
                    <el-button size="mini">活动详情</el-button>
                </div>
            </div>
        </div>
        <div class="statistics-box">
            <div class="statistics">
                <span>拼团总量 {{ info_data.num_tuan }}</span>
                <span>订单总量 {{ info_data.num_od }}</span>
                <span>订单金额 {{ info_data.total_od }}</span>
            </div>
        </div>
        <div
            class="list-box comm-list"
            v-infinite-scroll="loadFun"
            v-if="list_data.length > 0"
        >
            <div
                class="list-row"
                @click="getDetailsData(item)"
                v-for="item in list_data"
                :key="item.id"
            >
                <div class="title">{{ item.custom_name }}的拼团</div>
                <div class="dom-box">
                    <div class="num-m">拼团人数 {{ item.num_od }}人</div>
                    <div class="status">{{ item.status_txt }}</div>
                    <div class="pic">金额 +{{ item.total_od }}</div>
                </div>
                <div class="dom-box">
                    <div class="time">{{ item.time_to_txt }}结束</div>
                    <div class="num">数量 +{{ item.num_gd }}</div>
                </div>
            </div>
        </div>
        <empty v-else />
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import empty from "../comm/empty.vue";
export default {
    components: { empty },

    data() {
        return {
            is_soll: false,
            selectForm: {
                pfrom: 0,
                pnum: 20,
                evenid: "",
            },
            list_data: [],
            info_data: null,
        };
    },
    methods: {
        initData(item) {
            this.selectForm.evenid = item.id;
            this.emptyData();
            this.getlistFun();
        },
        // 滚动刷新
        loadFun() {
            if (this.is_soll) return;
            this.selectForm.pfrom += 20;
            this.getlistFun();
        },
        getDetailsData(item) {
            this.$emit("getDetailsData", item);
        },
        // 获取详情列表
        async getlistFun() {
            this.is_soll = true;
            let url = config.YX_PIN_TUAN_LS;
            let param = this.selectForm;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.event && this.list_data.length == 0) {
                    this.info_data = res.data.event;
                }
                if (res.data.ls) {
                    this.list_data = this.list_data.concat(res.data.ls);
                    setTimeout(() => {
                        this.is_soll = false;
                    }, 200);
                } else {
                    this.is_soll = true;
                }
            }
        },
        // 清空数据
        emptyData() {
            this.list_data = [];
            this.selectForm.pfrom = 0;
            this.is_soll = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.marketing-three {
    width: calc(100% - 693px);
    padding: 10px;
    font-size: 14px;
    .head-title {
        height: 38px;
        margin-bottom: 10px;
        border-bottom: 2px solid #e4e7ed;
        display: flex;
        align-items: center;
        font-size: 18px;
    }
    .info-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info-data {
            font-size: 14px;
            div {
                margin: 9px 0;
            }

            .num-box {
                span {
                    margin-right: 20px;
                }
            }
        }
        .info-status {
            .stauts {
                text-align: center;
                color: #999;
                margin-bottom: 10px;
            }
            .but-box {
            }
        }
    }
    .statistics-box {
        height: 40px;
        background: #f2f2f2;
        padding: 0 10px;
        display: flex;
        align-items: center;
        margin: 2px 0;
        margin-bottom: 0px;
        .statistics {
            span {
                margin-right: 20px;
            }
        }
    }
    .list-box {
        margin-top: 10px;
        height: calc(100% - 246px);
        overflow: auto;
        .list-row {
            border-bottom: 1px solid #ede7e7;
            padding: 10px;
            cursor: pointer;
            &:hover {
                background: #fdf6f6;
                border-radius: 5px;
            }
            &:last-child {
                border: none;
            }
            .title {
            }
            .dom-box {
                font-size: 12px;
                display: flex;
                justify-content: space-between;
                div {
                    flex: 1;
                }
                .status {
                    color: #999;
                    text-align: center;
                }
                .pic {
                    text-align: right;
                }
                .num {
                    text-align: right;
                }
            }
        }
    }
}
</style>